<template>
  <view class="container">
    <view class="university-list">
      <view class="university-item" v-for="item in universityList" :key="item.id">
        <image :src="item.link" mode="aspectFill" />
        <view class="university-item-center">
          <view class="title"> {{ item.name }}</view>
          <view class="tag">
            <text>高职高专</text> / &nbsp;<text>北京</text> / <text>综合</text>
          </view>
        </view>
        <view class="university-item-right" v-if="!item.isSelect">+对比</view>
        <view class="university-item-right select" v-if="item.isSelect">+对比</view>
      </view>
    </view>
    <view class="pagination">
      <view>{{ 1 }}</view>
      <view v-if="currentPage > 4" class="ellipsis">...</view>
      <view class="page" v-for="(page, index) in visiblePages" :key="index">
        <view :class="{ active: currentPage === index }" @click="changePage(index)">{{ page + 1 }}</view>
      </view>
      <view v-if="currentPage < visiblePages.length - 4" class="ellipsis">...</view>
      <view @click="changePage(totalPages)">{{ totalPages + 1 }}</view>
    </view>
  </view>
</template>
  
<script>
import { universityList } from '../index/indexData'
export default {
  data() {
    return {
      universityList,
      currentPage: 1,
      totalPages: 255, // 总页数
      visiblePages: [] // 可见页码
    };
  },
  mounted() {
    this.updateVisiblePages();
  },
  methods: {
    changePage(index) {
      this.currentPage = index;
      this.updateVisiblePages();
      // 处理页码切换逻辑
    },
    updateVisiblePages() {
      let range = 4; // 中心附近显示的页码数量
      this.visiblePages = [];
      for (let i = 0; i <= range; i++) {
        this.visiblePages.push(this.currentPage - range);
        range--
      }
    }
  }
};
</script>
  
<style lang="less" scoped>
.container{
  background-color: white;
}
.university-list {
  .university-item {
    position: relative;
    display: flex;
    height: 200upx;
    justify-content: flex-start;
    border-bottom: 1upx solid #e6e6e6;

    image {
      width: 150upx;
      height: 150upx;
      margin-top: 25upx;
    }

    .university-item-center {
      position: relative;
      top: 50%;
      height: 80upx;
      width: 430upx;
      padding: 0 30upx;
      transform: translateY(-50%);

      .title {
        font-size: 32upx;
        font-weight: 700;
        margin-bottom: 20upx;
      }
    }

    .university-item-right {
      width: 100upx;
      height: 50upx;
      border: 1upx solid #999999;
      border-radius: 10upx;
      color: #666666;
      text-align: center;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      line-height: 50upx;
    }

    .university-item-right.select {
      color: white;
      background-color: #d01117;
      border: 1upx solid #d01117;
    }
  }
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>